<template>
	<view class="content">
		<view class="welcome-box">
			<view class="welcome">
				欢迎来到蚌壳找房
			</view>
		</view>
		
		<view class="uni-form-item uni-column">
			<input type="tel" class="uni-input" name="" v-model="userPhone" placeholder="请输入账号" />
		</view>
		<view class="uni-form-item uni-column">
			<input type="password" class="uni-input" name="" v-model="userPassword" placeholder="请输入密码" />
		</view>
		<button type="primary" @click="gotoIndex">登陆</button>
		<view class="links">
			<view class="link-highlight" @click="gotoRegistration">
				还没有账号? 注册账号
			</view>
		</view>
	</view>
</template>

<script>
	import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				userPhone:"",
				userPassword:""
			}
		},
		onLoad() {
			
		},
		methods: {
			...mapActions(['setUser']),
			gotoIndex(){
				this.$axios.post('userLogin',this.qs.stringify({'userPhone':this.userPhone,
																'userPassword':this.userPassword}))
				.then((res)=>{
					console.log(res.data)
					if(res.data.status == 1){
						this.setUser(res.data.data)
						uni.showToast({
							title:"登陆成功!",
							duration:1000
						})
						uni.switchTab({
							url:"/pages/mine/index"
						})
					}
					this.setUser(res.data.data)
				})
				.catch(err => {
					console.log(err)
				})
			},
			gotoRegistration(){
				uni.navigateTo({
					url:"/pages/mine/registration",
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
$color-primary: #3881ce;
.content {
	padding: 80upx;
	/* background-color: #999999; */
}
.welcome-box{
	width: 100%;
	height: 50px;
	margin-top: 20px;
	margin-bottom: 10px;
	text-align: center;
}	
.welcome{
	text-align: center;
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-size: 22px;
	color: #555555;
}
.uni-form-item{
	margin-bottom: 40upx;
	padding: 0;
	border-bottom: 1px solid #e3e3e3;
}
.uni-input{
	font-size: 30upx;
	padding: 7px 0;
}

button[type="primary"]{
	background-color: $color-primary;
	border-radius: 0;
	font-size: 34upx;
	margin-top: 60upx;
}
.links{
	text-align: center;
	margin-top: 40upx;
	font-size: 26upx;
	color: #999;
}
.link-highlight{
	color: $color-primary
	}
.view{
	display: inline-block;
	vertical-align: top;
	margin: 0 10upx;
}
</style>
